<template>
	<view class="list-card">
		<view class="list-header">
			<view class="list-header__title">我的小队</view>
			<!-- <view class="iconfontPT iconclose list-header__close" @tap="handleClose"></view> -->
		</view>
		<scroll-view class="list-content" scroll-y="true">
			<template v-if="list.length">
				<view class="list-item" v-for="item in list" :key="item.uid">
					<image class="list-item__image" :src="item.portrait" mode="aspectFill"></image>
					<view class="list-item__info">
						<view class="list-item__name">
							<view class="u-line-1">{{item.name}}</view>
							<view class="iconfontPT iconnansheng_1 list-item__sex" v-if="item.sex"></view>
							<view class="iconfontPT iconnvsheng list-item__sex" v-else></view>
						</view>
						<view class="list-item__phone">{{item.mobile}}</view>
					</view>
					<view class="iconfontPT icondianhua list-item__icon" @tap="handlePhoneCall(item.mobile)"></view>
				</view>
			</template>
			<template v-else>
				<u-empty text="小队还没有人哦~"></u-empty>
			</template>
		</scroll-view>
		<view class="list-action">
			<button class="list-action__button" type="warn" @tap="handleBack">返 回</button>
		</view>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
	import {getTeamList} from '@/apis/personal/index.js'
	export default{
		name:'list-card',
		data(){
			return {
				list:[]
			}
		},
		methods:{
			handleClose(){
				this.$emit('close',false)
			},
			handleBack(){
				this.$emit('back')
			},
			handlePhoneCall(phoneNumber){
				uni.makePhoneCall({phoneNumber})
			},
			async getTeamList(){
				try{
					const xn_factory_id = uni.getStorageSync('xn_factory_id')
					const uid = uni.getStorageSync('userId')
					const {code,msg,data} = await getTeamList({xn_factory_id,uid})
					if(code === 1){
						this.list = data
					}else{
						this.$refs.uToast.show({title:msg,type:'warning',position:'top'})
					}
				}catch(e){
					uni.showModal({ title:'出错啦！',content:e.message,showCancel:false})
				}
			}
		},
		mounted(){
			this.getTeamList()
		}
	}
</script>

<style lang="scss">
	.list-card{
		width: 650rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.list-header{
		display: flex;
		height: 50rpx;
		justify-content: center;
		align-items: center;
		position: relative;
		&__title{
			font-size: 47rpx;
			font-weight: bold;
			color: #333333;
		}
		&__close{
			font-size: 47rpx;
			color: #9B9B9B;
			position: absolute;
			right: 0;
		}
	}
	.list-content{
		height: 780rpx;
		padding: 30rpx 0;
		overflow-y: auto;
		overflow: hidden;
	}
	.list-item{
		height: 130rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;
		padding: 25rpx 0;
		box-sizing: border-box;
		&__image{
			height: 80rpx;
			width: 80rpx;
			border-radius: 10rpx;
			vertical-align: middle;
		}
		&__info{
			height: 100%;
			padding-left: 35rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			line-height: 1em;
		}
		&__name{
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}
		&__sex{
			padding-left: 10rpx;
			&:first-of-type{
				color: #3091FF;
			}
			&:last-of-type{
				color: #F74D94;
			}
		}
		&__phone{
			font-weight: 400;
			color: #989898;
			font-size: 28rpx;
		}
		&__icon{
			color: #5FB8E7;
			font-size: 50rpx;
			margin-left: auto;
		}
	}
	.list-action{
		&__button{
			width: 100%;
			height: 80rpx;
			border-radius: 15rpx;
			font-size: 28rpx;
			line-height: 1em;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F14434;
		}
	}
</style>
